<script setup lang="ts">
import { tjajl} from '../index'
// import { ref, reactive } from "vue";
// import { graphic } from "echarts/core";
// import { countUserNum } from "@/api";
// import {ElMessage} from "element-plus"

// let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
// const option = ref({});
// const state = reactive({
//   lockNum: 0,
//   offlineNum: 0,
//   onlineNum: 0,
//   alarmNum: 0,
//   totalNum: 0,
// });
// const echartsGraphic = (colors: string[]) => {
//   return new graphic.LinearGradient(1, 0, 0, 0, [
//     { offset: 0, color: colors[0] },
//     { offset: 1, color: colors[1] },
//   ]);
// };
// const getData = () => {
//   countUserNum().then((res) => {
//     console.log("左中--用户总览",res);
//     if (res.success) {
//       state.lockNum = res.data.lockNum;
//       state.offlineNum = res.data.offlineNum;
//       state.onlineNum = res.data.onlineNum;
//       state.totalNum = res.data.totalNum;
//       state.alarmNum = res.data.alarmNum;
//     }else{
//       ElMessage.error(res.msg)
//     }
//   }).catch(err=>{
//     ElMessage.error(err)
//   });
// };
// getData();

</script>

<template>
  <div class="ajlist">

    <div class="card" v-for="(item,index) in tjajl">
      <div class="pressitem">
        <el-progress type="circle" width="80" stroke-width="15" indeterminate="true" color="#e6451c"  :percentage="item.percent" />
      </div>
        <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">{{ item.name }}</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">{{item.num}}万件</div>
      </div>
    <!-- <div class="card">
      <div class="pressitem">
        <el-progress type="circle" width="80" stroke-width="15" indeterminate="true" color="#e6451c"  :percentage="84.8" />
      </div>
        <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">人民调解</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">173.68万件</div>
      </div> -->
    <!-- <div class="card">
      <div class="pressitem">
        <el-progress type="circle" width="80" stroke-width="15" indeterminate="true" color="#e6451c"  :percentage="15.2" />
      </div>
        <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">行专调解</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">26.05万件</div>
      </div>
    <div class="card">
      <div class="pressitem">
        <el-progress type="circle" width="80" stroke-width="15" indeterminate="true" color="#e6451c"  :percentage="0" />
      </div>
        <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">行政调解</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">0 件</div>
      </div>
    <div class="card">
      <div class="pressitem">
        <el-progress type="circle" width="80" stroke-width="15" indeterminate="true" color="#e6451c"  :percentage="0" />
      </div>
        <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">商事调解</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">0 件</div>
      </div> -->

  </div>
</template>

<style scoped lang="scss">
.heidasd{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ajnshkqs{
  color: #00eaff;
  font-weight: bold;
}
.ajnshkqq{
  color: #c0f4f9;
  font-size: 14px;
}
.pressitem{
  height: 50%;
  width: 100%;
  margin-top: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep() .el-progress path:first-child {
    // 修改进度条背景色
    stroke: #1b8d87;
}
:deep() .el-progress__text {
    // 修改进度条文字提示颜色
    color: #4ed16f;
}


.iida{
  color: #1949a3;
}
.card{
  height: 80%;
  width: 120px;
  border: 1px solid rgb(50, 143, 143);
  box-shadow:2px 0px 8px 4px rgba(49, 114, 134, 0.5);

}
.ajlist{
  height: 95%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
